<template>
  <div id="">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="classify in classifyList" :key="classify.key">
        <img :src="setImgUrl(classify.indexIcon)" alt="" width="100%" @click="toFindMatch(classify.id)">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "",
  props: ['classifyList'],
  data: () => ({
    swiperOption: {
        pagination: {
          clickable: true,
        },
        slidesPerView: 3.5,
        spaceBetween: 5,
        freeMode: true,
        paginationClickable: true,
        loop: false,
        onTouchEnd: function() {
            swiper.startAutoplay()
        }
     },
  }),
  methods: {
    setImgUrl(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 跳转到 找赛事
    toFindMatch(classifyType) {
      this.$router.push({path:'/findMatch',query:{classifyTypeId:classifyType}});
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
